<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="我的钱包" titleTintColor="#fff">
			<text slot="back" class="iconfont">&#xe63d;</text>
			<text slot="iconfont" @click="onRefresh()" class="iconfont" style="font-size:56rpx;">&#xe64c;</text>
		</navigation>
		<view class="list">
			<view class="list-item">
				<view class="l-i-item">
					<view class="text-t">总资产</view>
					<view class="text-t">今日盈亏</view>
				</view>
				<view class="l-i-item">
					<view class="text-t mark">
						<text>{{ totalBalance }}</text>
						元
					</view>
					<view class="text-t">
						<text class="text-t-m" :class="{ gree: !isnegative(totalWin), red: isnegative(totalWin) }">{{ totalWin }}</text>
						元
					</view>
				</view>
			</view>

			<view class="list-item" v-for="(item, index) in balanceList" :key="index">
				<view class="l-i-item">
					<view class="text-t">{{ item.name }}</view>
					<view class="text-t">今日盈亏</view>
				</view>
				<view class="l-i-item">
					<view class="text-t">
						<text class="text-t-mm">{{ decimal(item.balance) }}</text>
						元
					</view>
					<view class="text-t">
						<text class="text-t-m" :class="{ gree: !isnegative(item.win), red: isnegative(item.win) }">{{ decimal(item.win) }}</text>
						元
					</view>
				</view>
			</view>
		</view>
		<view class="other">
			<view class="text-t">金额明细</view>
			<view class="more-btn" @click="toTransactionPage()">查看更多</view>
		</view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: { Tabbar, navigation },
	data() {
		return {
			totalBalance: '0.00', //总资产
			totalWin: '0.00', //总盈亏
			balanceList: [] //
		};
	},
	onLoad() {
		if (!Config.is3rd) {
			//没有第三方直接放回
			this.goBackPage();
			return;
		}
		this.$store.commit('isTestPlay');
		if (this.$store.state.isTestPlay) {
			VueTools.toastNo("试玩账号不能进入");
			this.goBackPage();
			return;
		} 
		this.getBalanceData();
	},
	methods: {
		/**
		 * 获取资产的数据
		 */
		getBalanceData(isFirst = true) {
			if (VueTools.getStorageSync(Config.IS_LOGIN_STORE_KEY) == 1 || VueTools.getStorageSync(Config.IS_LOGIN_STORE_KEY) == '1') {
				this.$store.commit('isTestPlay');
				if (this.$store.state.isTestPlay) {
					VueTools.toastNo('试玩账号不能进入');
					this.goBackPage();
					return;
				} else {
					let that = this;
					Net.ayiHttp(
						URL.OTHER_BALANCE,
						'{}',
						function(res) {
							if (res.code == Config.SUCCESS_CODE) {
								//成功的逻辑
								let data = Tools.aesDecodeToJson(res.data);
								if (!Tools.isEmpty(data) && data.length >= 1) {
									that.balanceList = data;
									that.totalBalance = that.calcTotalBalance(data, 'balance');
									that.totalWin = that.calcTotalBalance(data, 'win');
								}
								if (!isFirst) {
									VueTools.toastNo('刷新成功');
								}
							} else if (res.code == Config.FAIL_CODE) {
								VueTools.toastNo(res.message);
							} else if (res.code == Config.LOGIN_CODE) {
								uni.navigateTo({
									url: '/pages/my/login/login'
								});
							}
						},
						function(err) {
							console.log('error:', err);
						}
					);
				}
			} else {
				this.navigateToSigleUrl('/pages/my/login/login');
			}
		},
		/**
		 * 计算总的余额
		 * @param {Object} balanceList  数据
		 * @param {Object} key
		 */
		calcTotalBalance(balanceList, key) {
			let res = '0.00';
			for (let item in balanceList) {
				res = (parseFloat(res) + parseFloat(balanceList[item][key])).toFixed(2);
			}
			return res;
		},
		/**
		 * 跳转到充值记录页面
		 */
		toTransactionPage() {
			this.navigateToSigleUrl('/pages/recharge/transaction/transaction');
		},
		/**
		 * 刷新获取资产
		 */
		onRefresh() {
			this.getBalanceData(false);
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
.list {
	margin: 20rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 0px 20rpx;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	.list-item {
		height: 100rpx;
		padding-top: 20rpx;
		border-bottom: 1px solid #e8e9ec;
		.l-i-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			.text-t {
				font-size: 28rpx;
				color: #8d8d8d;
				.text-t-mm {
					color: #000;
				}
				.text-t-m {
					font-weight: bold;
				}
			}
			.mark {
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
			}
		}
		&:last-child {
			border: none;
		}
	}
}
.other {
	.text-t {
		padding-left: 20rpx;
		color: #a3a3a3;
		font-size: 28rpx;
	}
	.more-btn {
		height: 80rpx;
		border-radius: 20rpx;
		margin: 20rpx;
		text-align: center;
		line-height: 80rpx;
		background: #fff;
		color: #333;
		font-size: 16px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	}
}
//输赢值得颜色
.red {
	color: #ff0000;
}
.gree {
	color: #00cc00;
}
</style>
